<template>
  <div>
    <div id="top-status-settings">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <div id="bottom">
      <div style="width: 100%; height: 40px; background-color: #F8F8F8; margin-top: 50px;">
        <img src="../../../assets/向左箭头(灰).png" style="width: 25px; height: 25px; float: left;margin: 6px 0 0 15px" @click="gopersonalUser">
        <p style="float: left; margin: 7px 0 0 120px;font-weight: bolder;font-size : 13pt;">设置</p>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">多语言/Language</p>
        <div style="float: right;margin: 15px 17px 0 0; ">
          <p style="float: left;font-weight: bold;font-size : 14pt;margin: 0 0 0 0;">中文</p>
          <img src="@/assets/向右箭头.png"
               style="width: 25px; height: 25px;margin-right: 0">
        </div>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">定位功能</p>
        <el-switch style="float: right;margin: 20px 35px 0 0"
            v-model="value"
            active-color="#4DA8C9"
            inactive-color="#C6C6C7">
        </el-switch>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">消息通知</p>
        <el-switch style="float: right;margin: 20px 35px 0 0"
                   v-model="value1"
                   active-color="#4DA8C9"
                   inactive-color="#C6C6C7">
        </el-switch>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">手机剪切板权限</p>
        <el-switch style="float: right;margin: 20px 35px 0 0"
                   v-model="value2"
                   active-color="#4DA8C9"
                   inactive-color="#C6C6C7">
        </el-switch>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">免密支付设置</p>
        <img src="@/assets/向右箭头.png"
             style="width: 25px; height: 25px;float: right;margin: 15px 17px 0 0">
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="NotOpened">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">服务协议与规则</p>
        <img src="@/assets/向右箭头.png"
             style="width: 25px; height: 25px;float: right;margin: 15px 17px 0 0">
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 3px" @click="dialogVisible=true;">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">给我们评价</p>
        <img src="@/assets/向右箭头.png"
             style="width: 25px; height: 25px;float: right;margin: 15px 17px 0 0">
      </div>
<!--      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 15px">-->
<!--        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">清楚缓存</p>-->
<!--        <div style="float: right;margin: 15px 17px 0 0; ">-->
<!--          <p style="float: left;font-weight: bolder;font-size : 13pt;margin: 5px 0 0 0;">123MB</p>-->
<!--          <img src="@/assets/向右箭头.png"-->
<!--                    style="width: 25px; height: 25px;">-->
<!--        </div>-->
<!--    </div>-->
    </div>

    <el-dialog
        :visible.sync="dialogVisible"
        width="70%">
<!--        :before-close="handleClose"-->

        <img src="@/assets/圆叉(白).png"
        style="width: 70px;height: 70px;" >
        <p style="font-weight: bolder;font-size : 14pt;color: #10101E">喜欢“XXXX”吗？</p>
        <p style="font-weight: bold;font-size : 12pt;color: #10101E">轻点星型以在App Store中评分</p>
      <van-rate
          v-model="value3"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
          @change="updatePiont"
      />
        <p style="font-size : 11pt;color:#4EADD3;"
            @click="dialogVisible = false">以 后</p>
    </el-dialog>


    <Tabbar/>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue"
import {userUpdatePonit} from "@/components/api/user/user";
import Vue from 'vue';
import {Tab, Tabs} from 'vant';
import { Rate } from 'vant';

Vue.use(Rate);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      time: '',
      value: true,
      value1: true,
      value2: true,
      dialogVisible: false,
      value3: null,
      colors: ['#5FB0CF', '#5FB0CF', '#5FB0CF'],
    };
  },
  methods: {
    NotOpened(){
      this.$message({
        message: '该功能尚未开放',
        type: 'warning',
        duration: 800
      })
    },
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    gopersonalUser(){
      this.$router.push("/personalUser")
    },
       updatePiont(){
         const driverPoint = this.value3;
         const id = JSON.parse(localStorage.getItem('personalUser')).id;
         userUpdatePonit(driverPoint,id).then(response => {
           console.log(response)
           this.dialogVisible=false
         });
   },
  },
  created() {
    this.updateTime();
    this.setSignalStatus();
  }
};
</script>
<style>
#top-status-settings {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #F8F8F8;
  padding: 10px;
  font-weight: bolder;
  color: #171010;
  padding-top: 15px;
  float: left;
}
#bottom{
  width: 100%;
  height: 798px;
  float: left;
  margin-top: 10px;
  background-color: #F8F8F8;
}
</style>